<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>导航条带有跳跃动画</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #1c1c1c;
        font-family: Arial, "Ping Fang SC", "Microsoft Yahei", sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .navbar {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: linear-gradient(135deg, #2f2f2f, #454545);
        width: 90%;
        padding: 15px;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
        position: relative;
      }

      .navbar a {
        text-decoration: none;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
        transition: color 0.3s;
        position: relative;
        z-index: 1;
        flex: 1;
      }

      .navbar a .icon {
        width: 36px;
        height: 36px;
        margin-bottom: 5px;
        fill: white;
        transition: fill 0.3s;
      }

      .navbar a.active {
        color: #28a745;
      }

      .navbar a.active .icon {
        fill: #28a745;
        animation: bounce 0.6s;
      }

      @keyframes bounce {
        0%,
        20%,
        50%,
        80%,
        100% {
          transform: translateY(0);
        }
        40% {
          transform: translateY(-10px);
        }
        60% {
          transform: translateY(-5px);
        }
      }

      .highlight {
        position: absolute;
        bottom: 0;
        height: 4px;
        background-color: #28a745;
        width: calc(100% / 5);
        transition: transform 0.5s ease, width 0.5s ease;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="navbar">
      <div class="highlight"></div>
      <a href="#" class="active" onclick="setActive(this)">
        <svg
          class="icon"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
        >
          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
        </svg>
        主页
      </a>
      <a href="#" onclick="setActive(this)">
        <svg
          class="icon"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
        >
          <path
            d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14H8v-2h4v2zm0-4H8v-2h4v2zm0-4H8V7h4v2zm6 8h-4v-2h4v2zm0-4h-4v-2h4v2zm0-4h-4V7h4v2z"
          />
        </svg>
        文档
      </a>
      <a href="#" onclick="setActive(this)">
        <svg
          class="icon"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
        >
          <path d="M20 2H4v20h16V2zm-2 18H6V4h12v16z" />
        </svg>
        扫描
      </a>
      <a href="#" onclick="setActive(this)">
        <svg
          class="icon"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 36 36"
        >
          <path
            d="M18 3c-8.284 0-15 6.716-15 15s6.716 15 15 15 15-6.716 15-15S26.284 3 18 3zm0 4c6.075 0 11 4.925 11 11s-4.925 11-11 11S7 24.075 7 18 11.925 7 18 7zm-4 9v2h8v-2h-8zm0 4v2h8v-2h-8z"
          />
        </svg>
        发现
      </a>
      <a href="#" onclick="setActive(this)">
        <svg
          class="icon"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
        >
          <path
            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
          />
        </svg>
        我的
      </a>
    </div>

    <script>
      function setActive(element) {
        const navbar = document.querySelector(".navbar");
        const links = navbar.querySelectorAll("a");
        links.forEach((link) => link.classList.remove("active"));
        element.classList.add("active");
        const index = Array.from(links).indexOf(element);
        const highlight = document.querySelector(".highlight");
        highlight.style.transform = `translateX(${index * 100}%)`;
      }
    </script>
  </body>
</html>
